<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue表格</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <style>
        .li_style {
            list-style: none;
            display: inline;
            padding: 6px 12px;
            border: 1px solid #ddd;
        }

        .li_style>a {
            text-decoration: none;
        }

        .style_1 {
            background-color: #009a61;
        }

        #frome_table {
            width: 650px;
        }
    </style>
</head>

<body>
    <div id="table">
        <table>
            <thead>
                <tr>
                    <th>name1</th>
                    <th>name2</th>
                    <th>name3</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for='list in iteam'>
                    <td>{{list.name}}</td>
                    <td>{{list.age}}</td>
                    <td>{{list.sex}}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div id="page">
        <ul>
            <li class="li_style" v-for="(number,index) in pagelist" v-bind:class="{style_1:index == a_num}" v-on:click="click(index)">
                <a href="#">{{ number }}</a>
            </li>
        </ul>
    </div>

    <div id="frome_table">
        <form>
            <fieldset>
                <legend>vue 实例</legend>
                <div>
                    <label>name：</label>
                    <input type="text" v-model='new_person.name'>
                </div>
                <div>
                    <label>age：</label>
                    <input type="text" v-model='new_person.age'>
                </div>
                <label>sex：</label>
                <select v-model='new_person.sex'>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
                <button type="button" v-on:click='create_person'>插入</button>
            </fieldset>
        </form>
        <table>
            <thead>
                <tr>
                    <th>name</th>
                    <th>age</th>
                    <th>sex</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for='(person,index) in iteam'>
                    <td>{{person.name}}</td>
                    <td>{{person.age}}</td>
                    <td>{{person.sex}}</td>
                    <td>
                        <button type="button" v-on:click='delect_list(index)'>del</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script>
    new Vue({
        el: '#table',
        data: {
            iteam: [
                {
                    name: '1',
                    age: '28',
                    sex: '男'
                },
                {
                    name: '1',
                    age: '28',
                    sex: '男'
                }, {
                    name: '1',
                    age: '28',
                    sex: '男'
                }
            ]
        }
    })

    var vm = new Vue({
        el: '#page',
        data: {
            a_num: 0,
            pagelist: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

        },
        methods: {
            click(index) {
                this.a_num = index
            }
        }
    });

    new Vue({
        el: '#frome_table',
        data: {
            new_person: {
                name: '', age: '', sex: '男'
            },
            iteam: [{
                name: 'name1',
                age: 30,
                sex: '女'
            }]
        },
        methods: {
            create_person: function () {
                if (this.new_person.name !== '' && this.new_person.age !== '' && this.new_person.sex !== '') {
                    this.iteam.push(this.new_person)
                    this.new_person = { name: '', age: '', sex: '' } //添加完newPerson对象后，重置newPerson对象
                } else {
                    alert('信息不完整')
                }


            },
            delect_list: function (index) {
                this.iteam.splice(index, 1);
            }
        }
    })
</script>

</html>